//保养任务页面
import React, { Component } from "react";
import "./maintenance.scss";
import{Button} from 'zarm'
class ListItem extends Component {
  render() {
    return <div className="listItem">
      <div className="title">多媒体电脑教室8号楼266、智慧校园101室</div>
      <div className="timer"><img src={require('../../img/时间.png').default} alt="" />{new Date().toTimeString()}</div>
      <div className="autor">
        <div className="image"><img src={require('../../img/头像1.png').default} alt="" />
        <img src={require('../../img/头像2.png').default} alt="" /></div>
        <div className="btn"><Button  shape="round" theme="primary">接单</Button></div>
      </div>
    </div>;
  }
}
export default class Maintenance extends Component {
  state = {
    select: "1",
  };
  componentDidMount() {
    window.document.title = "日常维护";
  }
  handleSelect = (select) => {
    this.setState({ select });
  };
  render() {
    const { select } = this.state;
    return (
      <div className="maintenance">
        <div className="navbar">
          <div
            onClick={() => this.handleSelect("1")}
            className={select === "1" ? "select" : ""}
          >
            待保养 <span></span>
          </div>
          <div
            onClick={() => this.handleSelect("2")}
            className={select === "2" ? "select" : ""}
          >
            保养中 <span></span>
          </div>
          <div
            onClick={() => this.handleSelect("3")}
            className={select === "3" ? "select" : ""}
          >
            已保养 <span></span>
          </div>
        </div>
        <div className="content">
          <div style={{ display: select === "1" ? "block" : "none" }}>
            <ListItem />
            <ListItem />
            <ListItem />
            <ListItem />
          </div>
          <div style={{ display: select === "2" ? "block" : "none" }}>
            保养中
            <ListItem />
            <ListItem />
            <ListItem />
          </div>
          <div style={{ display: select === "3" ? "block" : "none" }}>
            已保养
            <ListItem />
            <ListItem />
          </div>
        </div>
      </div>
    );
  }
}
